<!--
 * @Description  : 聊天室
 * @Autor        : 杜康
 * @Date         : 2024-11-05 21:15:21 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2024-11-06 14:59:04 +0800
-->
<template>
  <div class="chat">
    <div class="chat-menu">
      <div class="chat-menu-btn">
        <el-button type="primary" round :icon="Plus">新建对话</el-button>
      </div>
      <div class="chat-menu-histroy">
        <div class="chat-menu-histroy-item" v-for="(item, index) in talkHistory" :key="index">
          <div class="chat-menu-histroy-item-title" v-text="item.title"></div>
          <div class="chat-menu-histroy-item-del" @click="handleDelTalk(item.id)">
            <el-icon size="14"><Delete /></el-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-body">
      <div class="chat-body-room">
        <div class="chat-body-room-header">
          <div class="chat-body-room-header-title">对话名称</div>
        </div>
        <div class="chat-body-room-talk" ref="chatContainer">
          <template v-for="(item, index) in currentTalk" :key="index">
            <div v-if="item.type === 'left'" class="chat-body-room-talk-left">
              <div class="chat-body-room-talk-left-leftavatar">
                <img src="@/assets/images/botavatar.png" alt="" />
              </div>
              <div class="chat-body-room-talk-left-content">
                <div class="chat-body-room-talk-left-content-text" v-text="item.content"></div>
              </div>
              <div class="chat-body-room-talk-left-rightavatar"></div>
            </div>
            <div v-if="item.type === 'right'" class="chat-body-room-talk-right">
              <div class="chat-body-room-talk-right-leftavatar"></div>
              <div class="chat-body-room-talk-right-content">
                <div class="chat-body-room-talk-right-content-text" v-text="item.content"></div>
              </div>
              <div class="chat-body-room-talk-right-rightavatar">
                <img src="@/assets/images/rightavatar.png" alt="" />
              </div>
            </div>
          </template>
        </div>
        <div class="chat-body-room-textarea">
          <div class="chat-body-room-textarea-body">
            <div class="chat-body-room-textarea-body-input">
              <el-input
                v-model="textarea"
                :rows="3"
                type="textarea"
                resize="none"
                placeholder="输入 星星 AI 探索版，解决复杂的搜索问题"
                @keyup.enter="handleSend()"
              />
            </div>
            <div class="chat-body-room-textarea-body-button">
              <el-icon size="24"><Mic /></el-icon>
              <el-icon size="24"><Paperclip /></el-icon>
              <el-icon
                size="24"
                :color="`${textarea ? '#409EFF' : '#C0C4CC'}`"
                @click="handleSend()"
                ><Promotion
              /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUpdated } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Plus } from "@element-plus/icons-vue";
const talkHistory = ref([
  {
    id: 1,
    title: "对话1",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 2,
    title: "对话2",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 3,
    title: "对话3",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 4,
    title: "对话4",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 5,
    title: "对话5",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 6,
    title: "对话6",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 7,
    title: "对话7",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 8,
    title: "对话8",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 9,
    title: "对话9",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 10,
    title: "对话10",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 11,
    title: "对话11",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 12,
    title: "对话12",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 13,
    title: "对话13",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 14,
    title: "对话14",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 15,
    title: "对话15",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 16,
    title: "对话16",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 17,
    title: "对话17",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    id: 18,
    title: "对话18",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  }
]);

const currentTalk = ref([
  {
    type: "left",
    content: "你好，我是一个AI智能助手，你可以向我提问任何问题，我会尽力回答。"
  },
  {
    type: "right",
    content:
      "少儿怎么预防近视少儿怎么预防近视少儿怎么预防近视少儿怎么预防近视少儿怎么预防近视少儿怎么预防近视少儿怎么预防近视少儿怎么预防近视少儿怎么预防近视少儿怎么预防近视少儿怎么预防近视少儿怎么预防近视"
  },
  {
    type: "left",
    content: `预防少儿近视可以采取以下措施：
                增加户外活动：户外活动能增加眼内多巴胺等活性物质释放，促进眼球正常发育并抑制眼轴变长，是防控近视有效、经济的方法。儿童青少年应坚持每天日间户外活动不少于2小时，或者每周累计达到14小时
                。
                培养良好的用眼习惯：长时间近距离用眼是诱导近视形成的关键因素，儿童青少年要养成良好用眼习惯。包括“三个一”原则（眼离书本一尺，胸距书桌一拳，手离笔尖一寸），坚持“20—20—20”原则（近距离用眼20分钟，向20英尺外远眺20秒以上），保持光线适度
                。
                分龄管控视屏时间：长时间近距离使用电子视屏类产品，易消耗儿童远视储备量，是儿童青少年近视早发、高发的重要原因。0～3岁婴幼儿不使用手机、平板、电脑等视屏类电子产品；3～6岁幼儿尽量避免其接触和使用手机、平板、电脑等视屏类电子产品；中小学生非学习目的使用电子屏幕单次时长不宜超过15分钟，每天累计时长不宜超过1小时
                。
                每天坚持做眼保健操：眼保健操可以刺激神经，放松眼部肌肉，促进眼部血液循环，缓解眼疲劳。有助于防控近视
                。
                均衡营养充足睡眠：0～17岁是眼球和视觉功能发育的重要阶段，需要摄入均衡的营养，多摄入鱼类、蛋类、乳类、豆制品等食物，多吃新鲜水果蔬菜。正常昼夜节律和充足睡眠对儿童青少年的眼睛发育至关重要，幼儿、小学生每天睡眠应不低于10小时，初中生睡眠应不低于9小时，高中生睡眠应不低于8小时
                。
                遵医散瞳诊断近视：家长观察到孩子有视物凑近、眯眼等异常情况或筛查发现视力变差，应及时到医疗机构进行眼科检查。散瞳验光是使用睫状肌麻痹剂放松眼部调节作用后进行医学验光，为诊断近视的“金标准”
                。
                确诊近视及时干预：一旦确诊近视应及时科学干预，通过配戴眼镜等进行矫正。配戴合适的眼镜可以有效矫正视物不清，延缓近视进展
                。
                重视高度近视及相关并发症：近视600度以上为高度近视。高度近视人群中，白内障、开角型青光眼、近视性黄斑病变、视网膜脱离、近视性视神经病变等致盲性眼病发病率明显高于其他人群。应采用及时、适宜的防控干预手段，推迟近视发病年龄，控制近视进展速度
                。
                多方合力共筑“防护墙”：防控儿童青少年近视需要政府、学校、家庭、儿童和医疗卫生机构等各方面共同努力，营造爱眼护眼的视觉友好环境，合力共筑近视“防护墙”
                。`
  }
]);

const textarea = ref("");

// 获取聊天容器的 DOM 引用
const chatContainer = ref(null);
const handleSend = () => {
  if (textarea.value.trim() !== "") {
    currentTalk.value.push({
      type: "right",
      content: textarea.value
    });
    textarea.value = "";
  }
};

// 使用 `onUpdated` 来确保每次更新后自动滚动到最底部
onUpdated(() => {
  // 当消息更新后，滚动到容器的底部
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
  }
});

onMounted(() => {
  // 当消息更新后，滚动到容器的底部
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
  }
});

// 删除对话
const handleDelTalk = (id) => {
  ElMessageBox.confirm(`您确定要删除吗？删除后将无法恢复！请谨慎操作！`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    autofocus: false,
    closeOnClickModal: false,
    type: "error"
  })
    .then(() => {
      talkHistory.value = talkHistory.value.filter((item) => item.id !== id);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "您点击了取消操作"
      });
    });
};
</script>
<style lang="less">
.body {
  height: calc(100% - 30px);
  background-color: #f6f7fb !important;
}
.chat {
  position: relative;
  border-radius: 12px;
  display: flex;
  flex-flow: row;
  overflow: hidden;
  position: relative;
  // background-color: rgb(247, 248, 252);
  background-color: #f6f7fb;
  width: 100%;
  height: 100%;
  &-menu {
    flex: 0 0 260px;
    background: rgb(255, 255, 255);
    overflow: hidden;
    width: 260px;
    height: 100%;
    transition: opacity 0.2s;
    &-btn {
      align-items: center;
      display: flex;
      justify-content: center;
      margin: 28px 24px;
    }
    &-histroy {
      position: relative;
      padding: 0 16px;
      overflow-y: auto;
      height: calc(100% - 100px);
      &::-webkit-scrollbar {
        display: none;
      }
      &-item {
        background: #f3f2ff;
        align-items: center;
        border-radius: 12px;
        box-sizing: border-box;
        color: #26244c;
        cursor: pointer;
        display: flex;
        flex-shrink: 0;
        font-size: 14px;
        height: 36px;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 6px 16px;
        position: relative;
        &-del {
          color: red;
          cursor: pointer;
        }
      }
    }
  }
  &-body {
    flex: 1;
    position: relative;
    // background: #e0dfff;
    display: flex;
    justify-content: center;
    &-room {
      position: relative;
      max-width: 820px;
      width: 820px;
      // background-color: rgb(255, 255, 255);
      &-header {
        height: 46px;
        position: relative;
        z-index: 1;
        backdrop-filter: blur(15px);
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 375px;
        background: #f6f7fb;
      }
      &-talk {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        height: calc(100% - 200px);
        &::-webkit-scrollbar {
          display: none;
        }
        &-left {
          display: flex;
          gap: 8px;
          &:nth-child(2n + 1) {
            padding-top: 24px;
          }
          &:last-child {
            padding-bottom: 24px;
          }
          &-content {
            position: relative;
            flex-grow: 1;
            &-text {
              background-color: rgb(255, 255, 255);
              // color: #fff;
              // border: 1px solid #2d65f7;
              // background: #2d65f7;
              border-radius: 12px;
              padding: 10px 16px;
              letter-spacing: 0.25px;
              line-height: 24px;
            }
          }
          &-leftavatar {
            flex: 0 0 40px;
            border-radius: 50%;
            img {
              height: 40px;
              width: 40px;
            }
          }
          &-rightavatar {
            position: relative;
            flex: 0 0 40px;
          }
        }
        &-right {
          display: flex;
          gap: 8px;
          padding-top: 24px;
          &:last-child {
            padding-bottom: 24px;
          }
          &-content {
            position: relative;
            flex-grow: 1;
            display: flex;
            justify-content: flex-end;
            &-text {
              color: #fff;
              border: 1px solid #2d65f7;
              background: #2d65f7;
              border-radius: 12px;
              padding: 10px 16px;
              letter-spacing: 0.25px;
              line-height: 24px;
            }
          }
          &-leftavatar {
            position: relative;
            flex: 0 0 40px;
            img {
              height: 40px;
              width: 40px;
            }
          }
          &-rightavatar {
            flex: 0 0 40px;
            border-radius: 50%;
            img {
              height: 40px;
              width: 40px;
            }
          }
        }
      }
      &-textarea {
        position: relative;
        z-index: 1;
        &-body {
          position: relative;
          border: 1px solid #e5e5e5;
          overflow: hidden;
          border-radius: 16px;
          transition: all 0.3 cubic-bezier(0.36, 0.66, 0.04, 1);
          box-shadow: none;
          background-color: #f3f5f9;
          // background: #000;
          background-color: #fff;
          padding: 5px 6px 8px 6px;
          &-input {
            position: relative;
            textarea {
              box-shadow: none;
              position: relative;
              overflow: hidden;
              &:hover {
                box-shadow: none;
              }
            }
          }
          &-button {
            position: relative;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 5px 0;
            .el-icon {
              flex: 0 0 30px;
            }
          }
        }
      }
    }
  }
}
</style>
